@tailwind base;
@tailwind components;
@tailwind utilities;

body,
html,
#__next {
  height: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

body {
  position: relative;
}

.left-shape {
  position: absolute;
  z-index: -1;
  top: -280px;
  left: -280px;
}

.right-shape {
  position: absolute;
  z-index: -1;
  top: -360px;
  right: -580px;
}

.editor-wrapper {
  /* tailwind vh equvalent is clunky,
  moving everything here for simplicity */
  height: 40vh;
  padding-top: 0.25rem;
}

tr:nth-child(even) {
  background-color: #f3f4fa;
}

/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .left-shape {
      top: -550px;
      left: -330px;
    }
    .right-shape {
      top: -530px;
      right: -730px;
    }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
    .left-shape {
      top: -550px;
      left: -330px;
    }
    .right-shape {
      top: -530px;
      right: -730px;
    }
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .left-shape {
      top: -550px;
      left: -330px;
    }
    .right-shape {
      top: -530px;
      right: -730px;
    }
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .left-shape {
      top: -550px;
      left: -330px;
    }
    .right-shape {
      top: -530px;
      right: -730px;
    }
}

/* ----------- Phones ----------- */

/* Portrait and Landscape */

@media only screen
  and (max-device-width: 800px)
  and (-webkit-min-device-pixel-ratio: 2) {
    .left-shape {
      display: none;
    }
    .right-shape {
      display: none;
    }
}

/* ----------- Laptop ----------- */

/* ----------- Non-Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 1) {
    .left-shape {
      top: -490px;
      left: -350px;
    }
    .right-shape {
      top: -480px;
      right: -700px;
    }
}

/* ----------- Retina Screens ----------- */
@media screen
  and (min-device-width: 1200px)
  and (max-device-width: 1600px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) {
    .left-shape {
      top: -490px;
      left: -350px;
    }
    .right-shape {
      top: -480px;
      right: -700px;
    }
}
